<template>
  <div class="main-nav" v-if="navList.length">
    <div
      :class="{
        'nav-cell': true,
        'nav-width-1': navList.length % 4 === 0,
        'nav-width-2': navList.length % 4 != 0
      }"
      v-for="item in navList"
      :key="item.id"
      @click="filter(item.classfiyid, item.link)"
    >
      <div class="nav-icon">
        <img :src="item.image" alt="" />
      </div>
      <div class="nav-text">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import { getNavList } from "@/api/dynamics";
import dynamicPanel1 from "@/views/dynamics/component/dynamic-panel-1.vue";

export default {
  props: ["type"],
  data() {
    return {
      navList: []
    };
  },
  methods: {
    filter(id, link) {
      // if (id !== 0) {
      //   this.$emit("filterDynamics", id);
      // } else {
      //   // this.$router.push(link)
      //   location.href = link;
      // }
      if (link != '') {
        location.href = link;
      } else {
        this.$emit("filterDynamics", id);
      }
    }
  },
  created() {
    getNavList(this.type).then(res => {
      if (res.status === 200) {
        this.navList = res.data.data.sort((a, b) => {
          return a.sort - b.sort;
        });
      }
    });
  },
  mounted() {
    dynamicPanel1;
  }
};
</script>

<style lang="less" scoped>
.main-nav {
  background-color: #fff;
  display: flex;
  padding: 0.5rem 3.2% 0;
  flex-wrap: wrap;
  justify-content: space-between;

  .nav-width-1 {
    width: 25%;
  }

  .nav-width-2 {
    width: 20%;
  }

  .nav-cell {
    margin-bottom: 0.5rem;
  }

  .nav-icon {
    height: 1.78rem;
    width: 1.78rem;
    margin: 0 auto 0.4rem;

    img {
      width: 100%;
    }
  }

  .nav-text {
    font-size: 0.52rem;
    color: #444444;
    text-align: center;
  }
}
</style>
